<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <!-- <my-component/> -->

        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>

    <div id="app1">
        <my-component></my-component>
        <!-- <my-component/> -->
    </div>


    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 1. 组件的注册，全局注册/局部注册
        // 组件本身就是一个Vue的实例
        // 2. 组件的使用： 直接在模板中，通过自定义标签的形式 就可以只用
        // 自定义标签 写成 小写横线的形式

        // 全局注册
        // 两个参数 ：1. 组件名称 字符串  2. 对象， 组件options（配置项）
        // 组件名称，要写成大驼峰命名法，至少两个单词组成,防止和html的原生标签产生冲突

        Vue.component("MyComponent",{
            template: `<div>全局注册</div>`
        })

        // 组件中的data要写成函数返回值的形式，组件是要复用，每个组件内部的数据都是独立
        Vue.component("ButtonCounter",{
            template: `<div><button @click="onClick">计数{{count}}</button></div>`,
            data: function(){
                return{
                    count: 0
                }
            },
            methods: {
                onClick(){
                    this.count++
                }
            }
        })

        var vm = new Vue({
            el: "#app",
        data: {

        }
        })


        var vm = new Vue({
            el: "#app1",
        data: {

        }
        })
    </script>
</body>
</html>